<template>
  <div class="jieduan">
    <div class="jieduanbox1">
      <div class="jdbox1Left" style="position: relative">
        <div>
          <span class="titStyle">大项演练成绩-战斗突击检验</span>
          <span @click="chengjiClick" class="xiqngqing" style="float: right; margin-right: 16px"
            >成绩详情</span
          >
        </div>
        <div
          ref="jieduanleft1"
          style="margin-top: 10px"
          class="yibiaopan"
        ></div>
        <div class="pdTime" style="margin-top: 20px">演练日期：2021-10-10</div>
        <div class="scBox">
          <div>
            <div class="pdText">vs上次评定</div>
            <div>
              <span class="fsText">89.33</span>
              <span class="bhNum" style="color: #59ba89">
                5
                <i class="el-icon-top-right"></i>
                <!-- <i class="el-icon-bottom-right"></i> -->
              </span>
            </div>
          </div>
          <div>
            <div class="pdText">vs同类型部队旅均值</div>
            <div>
              <span class="bhNum" style="color: #f56666">
                3
                <i class="el-icon-bottom-left"></i>
                <!-- <i class="el-icon-top-left"></i> -->
              </span>
              <span class="fsText">73.33</span>
            </div>
          </div>
        </div>
      </div>
      <div class="jdbox1Cont">
        <div>
          <span class="titStyle">成绩同级单位排名</span>
        </div>
        <div ref="jdchengjiBox" class="qushibianhua"></div>
      </div>
      <div class="jdbox1Right">
        <div>
          <span class="titStyle">扣分项统计</span>
        </div>
        <div ref="jdkoufenBox" class="qushibianhua"></div>
      </div>
    </div>
    <div class="jieduanbox2">
      <div>
        <span class="titStyle">扣分项统计</span>
      </div>
      <div class="jieduanbox2top">
        <div style="margin: 16px">
          <div>
            <span class="jd2topLeft">01.关键影响因子</span>
          </div>
          <div
            ref="jdtopsangji"
            class="qushibianhua"
            style="margin-top: 8px"
          ></div>
        </div>
        <div>
          <div style="margin: 16px">
            <div>
              <span class="jd2topLeft">02.按提升潜力指数排序</span>
            </div>
            <div class="qushibianhua jd2topLeftpaixu">
              <div v-for="(item, index) in paimingList" :key="index">
                <div
                  class="jd2paixutext"
                  :style="index == 0 ? 'margin-top:0px' : 'margin-top:24px'"
                >
                  {{ item.text }}
                </div>
                <el-progress
                  :format="format"
                  :stroke-width="12"
                  color="#277074"
                  :percentage="item.value"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jieduanbox2bottom">
        <div style="margin-bottom: 6px">
          <span class="jd2topLeft">03.影响评定的具体问题排序</span>
        </div>
        <div>
          <el-table
            :data="skuListInfo"
            height="400"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column prop="zhibiao" label="具体末极指标">
              <template slot-scope="scope">
                <div
                  style="font-weight: 700"
                  :style="
                    scope.row.zhibiaoType == 1
                      ? 'color:#01575C'
                      : 'color:#59BA89'
                  "
                >
                  {{ scope.row.zhibiao }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="storeIds" label="指标提升潜力指数">
            </el-table-column>
            <el-table-column prop="feeTypeInfo" label="具体训练问题">
            </el-table-column>
            <el-table-column prop="productInfo" label="问题解决效用模拟器">
              <template slot-scope="scope">
                <span>
                  <el-slider
                    v-model="scope.row.productInfo"
                    @change="hdchange(scope.row, scope.row.productInfo)"
                  ></el-slider>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="billing" label="原始分数"> </el-table-column>
            <el-table-column prop="jieguo" label="影响最终评定结果">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 训练水平动态分析
export default {
  data() {
    return {
      paimingList: [
        {
          text: "综合演练课目优良率（过程性）",
          value: 100,
        },
        {
          text: "关键岗位人员参训率（阶段性）",
          value: 80,
        },
        {
          text: "营主官训练成绩优良率（过程性）",
          value: 70,
        },
        {
          text: "训练场地可用率（阶段性）",
          value: 60,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
        {
          text: "心理适应性训练课目优良率（过程性）",
          value: 50,
        },
      ],
      skuListInfo: [
        {
          id: 1,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 1,
          storeIds: "1",
          productInfo: 10,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 10,
        },
        {
          id: 2,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 1,
          storeIds: "2",
          productInfo: 20,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 20,
        },
        {
          id: 3,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 1,
          storeIds: "3",
          productInfo: 30,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 30,
        },
        {
          id: 4,
          zhibiao: "综合演练课目优良率（阶段性）",
          zhibiaoType: 2,
          storeIds: "4",
          productInfo: 40,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 40,
        },
        {
          id: 5,
          zhibiao: "普通门店1",
          zhibiaoType: 2,
          storeIds: "4",
          productInfo: 50,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 50,
        },
        {
          id: 6,
          zhibiao: "普通门店1",
          zhibiaoType: 2,
          storeIds: "4",
          productInfo: 50,
          feeTypeInfo: "学费",
          billing: "月/季/年制度",
          jieguo: 50,
        },
      ],
      typeNameArr: [],
      typeNamePos: 0,
      storeArr: [],
      storePos: 0,
      feeArr: [],
      feePos: 0,
      hoverOrderArr: [],
    };
  },
  props: {
    ischengji:{
      type:Boolean
    }
  },
  components: {},
  mounted() {
    for (var i = 0; i < this.skuListInfo.length; i++) {
      this.skuListInfo[i].index = i;
    }
  },
  watch: {},
  methods: {
    //  大项演练成绩-战斗突击检验
    tujiyanlian() {
      let myChartchartTwo = this.$echarts.init(this.$refs.jieduanleft1);
      myChartchartTwo.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 12,
                roundCap: true,
                color: [
                  [0.25, "#F69D82"],
                  [0.5, "#FFD600"],
                  [0.75, "#59BA89"],
                  [1, "#01575C"],
                ],
              },
            },
            pointer: {
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 10,
              offsetCenter: [0, "-60%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 5,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            splitLine: {
              length: 10,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            axisLabel: {
              color: "#708189",
              fontSize: 12,
              distance: -40,
              formatter: function (value) {
                if (value === 0.875) {
                  return "优";
                } else if (value === 0.625) {
                  return "良";
                } else if (value === 0.375) {
                  return "中";
                } else if (value === 0.125) {
                  return "差";
                }
                return "";
              },
            },
            title: {
              offsetCenter: [0, "-40%"],
              fontSize: 14,
            },
            detail: {
              fontSize: 40,
              offsetCenter: [0, "-15%"],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + "分";
              },
              color: "auto",
            },
            data: [
              {
                value: 0.7,
                name: "综合成绩",
              },
            ],
          },
        ],
      });
      window.onresize = myChartchartTwo.resize;
    },
    // 成绩同级单位排名
    jdchengji() {
      let myChart = this.$echarts.init(this.$refs.jdchengjiBox);
      myChart.setOption({
        color: ["#59BA89"],
        tooltip: {
          axisPointer: {
            type: "",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1旅",
              "2旅",
              "3旅",
              "4旅",
              "5旅",
              "6旅",
              "7旅",
              "8旅",
              "9旅",
              "10旅",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#708189",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F4F6F8",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                color: "#f5f5f5", //网格线的颜色
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            // name: "成绩",
            type: "bar",
            barWidth: "60%",
            data: [
              120,
              {
                id: "se1",
                value: 200,
                itemStyle: {
                  color: "rgba(39, 112, 116, 0.8)",
                },
              },
              150,
              80,
              70,
              110,
              130,
              70,
              110,
              130,
            ],
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(89, 186, 137, 0.5)" },
                { offset: 1, color: "#fff" },
              ]),
            },
          },
        ],
      });
      window.onresize = myChart.resize;
      myChart.on("click", function (params) {
        console.log("点击了柱子", params);
      });
    },
    // 扣分项统计
    jdkoufen() {
      let myChart = this.$echarts.init(this.$refs.jdkoufenBox);
      myChart.setOption({
        color: ["#1F8A98", "#01575C", "#054361", "#708189"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "center",
          icon: "rect",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          textStyle: {
            fontSize: 12,
            color: "#708189",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    // 问题分析与提升辅助建议  -  1.关键影响因子
    jdsangji() {
      let myChart = this.$echarts.init(this.$refs.jdtopsangji);
      myChart.setOption({
        series: [
          {
            type: "sankey",
            bottom: "10%",
            emphasis: {
              focus: "adjacency",
            },
            data: [
              { name: "a" },
              { name: "b" },
              { name: "a1" },
              { name: "b1" },
              { name: "c" },
              { name: "e" },
            ],
            links: [
              { source: "a", target: "a1", value: 5 },
              { source: "e", target: "b", value: 3 },
              { source: "a", target: "b1", value: 3 },
              { source: "b1", target: "a1", value: 1 },
              { source: "b1", target: "c", value: 2 },
              { source: "b", target: "c", value: 1 },
            ],
            lineStyle: {
              color: "source",
              curveness: 0.5,
            },
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    // 问题解决效用模拟器
    hdchange(item, data) {
      this.skuListInfo[item.index].jieguo = data * 2;
      console.log("变化", item, data);
      // jieguo
    },
    chengjiClick(){
      console.log("执行的生存的手段")
      this.$emit("chengjiWatch")
    },
    // 合并单元格使用
    merageInit() {
      this.typeNameArr = [];
      this.typeNamePos = 0;
      this.storeArr = [];
      this.storePos = 0;
      this.feeArr = [];
      this.feePos = 0;
    },
    merage() {
      this.merageInit();
      for (let i = 0; i < this.skuListInfo.length; i += 1) {
        if (i === 0) {
          // 第一行必须存在
          this.typeNameArr.push(1);
          this.typeNamePos = 0;
          this.storeArr.push(1);
          this.storePos = 0;
          this.feeArr.push(1);
          this.feePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
          // 第一列
          // eslint-disable-next-line no-lonely-if
          if (this.skuListInfo[i].zhibiao === this.skuListInfo[i - 1].zhibiao) {
            this.typeNameArr[this.typeNamePos] += 1;
            this.typeNameArr.push(0);
          } else {
            this.typeNameArr.push(1);
            this.typeNamePos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.typeNameArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };
      }
    },
    format() {
      return "";
    },
  },
};
</script>

<style  scoped>
@import "./css/index.css";
</style>

